<template>
  <div>
    <a-drawer
      title="仓库详情"
      width="400"
      :visible="drawerVisible"
      @close="onClose"
    >
      <div v-if="storage">
        <a-row class="margin-bottom">
          <div class="img"><img :src="`${imgBaseURL}${storage.img}`" alt="仓库图片" width="150px"></div>
        </a-row>
        <a-row class="margin-bottom">编码：{{ storage.code }}</a-row>
        <a-row class="margin-bottom">仓库名：{{ storage.name }}</a-row>
        <a-row class="margin-bottom">
          <a-col :span="12">负责人：{{ storage.contact }}</a-col>
          <a-col :span="12">电话：{{ storage.telephone }}</a-col>
        </a-row>
        <a-row class="margin-bottom">
          分类：
          <a-tag color="blue" v-for="(value, i) in storage.type" :key="i">
            {{ value }}
          </a-tag>
        </a-row>
        <a-row>地址：{{ storage.address }}</a-row>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  name: 'WarehouseDrawer',
  mounted () {
  },
  props: {
    drawerVisible: {
      type: Boolean,
      default: false
    },
    storage: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      imgBaseURL: `http://122.9.107.215:8080/common/download?fileName=`,
      typeList: null
    }
  },
  methods: {
    onClose () {
      this.$emit('closeDrawer')
    }
  }
}
</script>

<style lang="less" scoped>
.img {
  margin: auto;
}
.margin-bottom {
  margin-bottom: 16px;
}
</style>
